<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--<link rel="stylesheet" href="css">-->
    <script type="text/javascript" src="vue/vue.min.js"></script>

</head>
<body>
<div id="outer">
    <!--if ---- else-- 为假则连标签一起删除 -->
    <div v-if="bool1">真则显</div>
    <div v-else="bool2">假则删</div>
    <div v-if="num==1">如果真</div>
    <div v-else-if="num==='18'">否则真</div>
    <div v-else-if="num!=0">又否则了</div>
    <div v-else>最后判断</div>
    <!-- v-show:bool值  为假隐藏，即display:none -->
    <div v-show="bool1">v-show真</div>
    <div v-show="bool2">v-show假</div>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#outer",
        data:{
            bool1:true,
            bool2:false,
            num:'18',
        },
    })
</script>
</html>